<template>
  <view class="classification_container">
    <view class="home_top_bg">
      <view class="top_bgimg" :style="'height:' + topBarHeight + 'px'">
        <view class="top_cont"
          :style="'height:' + tabBarHeight + 'px;margin-top:' + stateBarHeight + 'px'">
          <button type="text" class="top_search" @click="clickSearch">
            <icon type="search" size="16" class="search" />
          </button>
        </view>
      </view>
    </view>

    <view :style="'margin-top:' + topBarHeight + 'px;'"></view>

    <view class="classification_box">
      <view class="classification_top" :style="'top:' + topBarHeight + 'px'">
        <scroll-view scroll-x="true" class="item">
          <view v-for="(item, index) in classificationList" :key="index"
            :class="activeLabel.name === item.name ? 'activeStyle' : ''"
            @click="clickClassification(item)" class="text">
            <view>
              <text> {{ item.name }} </text>
              <text :class="activeLabel.name === item.name ? 'after' : ''"></text>
            </view>
          </view>
        </scroll-view>
      </view>
      <view class="classification_body" :style="'height:calc(100vh - '+ (topBarHeight+45) +'px);'">
        <scroll-view scroll-y="true" class="classification_left">
          <view class="item" :class="i.id===activeTitle.id?'selectItem':''"
            v-for="(i,j) in activeLabel.children" :key="j" @click="selectItem(i)">
            <view>
              <text>{{i.name}}</text>
            </view>
          </view>
          <view class="classificationAfter"></view>
        </scroll-view>
        <view class="classification_right">
          <view class="filtering">
            <view v-for="i in classificationFiltering" :key="i.id" class="filtering_item"
              @click="clickSort(i)" :class="i.id ===activeFiltering.id?'activeFiltering':''">
              <view>{{i.name}}
              </view>
              <view class="sort" v-if="i.id != 1">
                <image
                  :src="i.sort==='s'?staticUrl()+'/new/select_s.png':staticUrl()+'/new/unselected_s.png'">
                </image>
                <view style="height:2rpx"></view>
                <image
                  :src="i.sort==='x'?staticUrl()+'/new/select_x.png':staticUrl()+'/new/unselected_x.png'">
                </image>
              </view>
            </view>
          </view>
          <scroll-view scroll-y="true" class="goodsList" v-if="goodsList.length">
            <view class="goodsItem" v-for="(item,index) in goodsList" :key="index"
              @click.stop="clickItem(item)">
              <view class="img">
                <ImageCache :class="item.quantity ? '' : 'sellOut_container-img'"
                  :src="item.original ? item.original : staticUrl() + '/home/defaultImg.png'" />
                <view class="custom_box"
                  v-if="item.estimated && item.estimated.price && hasToken()">
                  <image :src="staticUrl() + '/new/estimated.png'"></image>
                  <view class="copywriting">{{ item.estimated.describe }}</view>
                  <view class="custom_prices">
                    <view class="txt"> {{ item.estimated.title }} </view>
                    <view class="price"> <text>￥</text> {{item.estimated.price }} </view>
                  </view>
                </view>
              </view>
              <view class="info ">
                <view class="goodsName ">
                  <text class="ephedrine" v-if="item.ephedrine">含特</text>
                  <text class="goods_name singleRowEllipsis">{{ item.goodsName }} </text>
                </view>
                <view class="simpleSpecs singleRowEllipsis">规格：{{ item.simpleSpecs }}</view>
                <view class="expirationDate">
                  <image :src="staticUrl()+'/new/expiration.png'"></image>
                  <text class="singleRowEllipsis">{{ item.expirationDate }}</text>
                </view>
                <view class="manufacturer">
                  <image :src="staticUrl()+'/new/company.png'"></image>
                  <text class="singleRowEllipsis">{{ item.manufacturer }}</text>
                </view>
                <view v-if="item.promotionMethods.length">
                  <text v-for="(n, m) in item.promotionMethods" :key="m"
                    :class="n.promotionType === 'COUPON' ? 'voucher' : 'seckillType'">
                    {{ n.promotionType === 'COUPON' ? '券' : n.name }}
                  </text>
                </view>
                <view class="promotionPrice" v-if="hasToken()">
                  <view class="price"
                    v-if="item.price || item.promotionPrice || item.originalPrice">
                    <text>￥</text>
                    <text>
                      {{item.estimated?item.price:item.promotionPrice?item.promotionPrice:item.price}}
                    </text>
                    <text>/{{ item.goodsUnit }}</text>
                  </view>
                  <view v-if="!item.price">
                    <text>资质审核可见</text>
                  </view>
                  <image :src="staticUrl() + '/new/cart.png'" @click.stop="addCarts(item)"
                    v-if="item.price || item.promotionPrice || item.originalPrice">
                  </image>
                </view>
                <view class="promotionPrice" v-if="!hasToken()">
                  <text> 登录可见 </text>
                </view>
              </view>
            </view>
            <view style="height:100rpx"></view>
          </scroll-view>
          <view class="notAvailable" v-else>
            <image :src="staticUrl()+'/new/notAvailable.png'"></image>
            <view>暂无商品</view>
          </view>
        </view>
      </view>
    </view>
    <AddCarts v-if="goods" :item="goods" @changStatus="closeGoods"></AddCarts>
    <QualificationsStatus v-if="verifyTokenStatus"></QualificationsStatus>
  </view>
</template>

<script>
import { getAllCategories, getCategoriesGoods } from '@/api/classification/index.js'
import AddCarts from '@/components/addCarts/index.vue'

export default {
  components: { AddCarts },
  data () {
    return {
      verifyTokenStatus: false,
      topBarHeight: 0, //状态栏加导航栏高度
      stateBarHeight: 0, //导航栏高度
      tabBarHeight: 50, //状态栏高度
      classificationList: [],
      goodsList: [],
      activeLabel: '',
      activeTitle: '',
      activeFiltering: '',
      classificationFiltering: [
        { id: 1, name: '综合' },
        { id: 2, name: '销量', sort: '' },
        { id: 3, name: '价格', sort: '' },
        { id: 4, name: '人气', sort: '' },
      ],
      goods: '',
    }
  },
  onShow () {
    var self = this
    uni.getSystemInfo({
      success: function (res) {
        self.stateBarHeight = res.statusBarHeight
        // #ifdef MP-WEIXIN
        let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
        let paddingSize = menuButtonInfo.top - self.stateBarHeight
        self.tabBarHeight = menuButtonInfo.bottom - self.stateBarHeight + paddingSize
        self.topBarHeight = menuButtonInfo.bottom + paddingSize
        // #endif
        // #ifndef MP
        self.topBarHeight = self.stateBarHeight + self.tabBarHeight
        // #endif
        // #ifdef MP-TOUTIAO
        self.stateBarHeight = 0
        self.topBarHeight = self.tabBarHeight
        // #endif
      }
    })
    this.verifyTokenStatus = getApp().verifyTokenStatus()
    this.getList()
  },
  methods: {
    clickItem (i) {
      uni.navigateTo({
        url: '/pages/goodsInfo/index?id=' + i.id
      })
    },
    closeGoods (e) { this.goods = '' },
    addCarts (e) { this.goods = e },
    clickSort (i) {
      this.activeFiltering = i
      if (i.sort) {
        if (i.sort === 'x') {
          i.sort = 's'
        } else {
          i.sort = 'x'
        }
      } else {
        i.sort = 'x'
      }
    },
    // 一级分类
    clickClassification (item) {
      this.activeLabel = item
      this.activeTitle = item.children[0]
      this.getGoods()
    },
    selectItem (i) {
      this.activeTitle = i
      this.getGoods()
    },
    // 搜索
    clickSearch () { uni.navigateTo({ url: '/pages_search/index' }) },
    getList () {
      getAllCategories().then(res => {
        if (res.code === 200) {
          this.classificationList = res.data
          this.activeLabel = res.data[0]
          this.activeTitle = res.data[0].children[0]
        }
      })
    },
    getGoods () {
      let a = this.activeLabel.id + ',' + this.activeTitle.id
      getCategoriesGoods(a).then(r => {
        if (r.code === 200) { this.goodsList = r.data.records }
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.uni-section {
  position: absolute;
  top: 100%;
}

.classification_container {
  width: 100%;
  height: 100%;
  background: #fff;
  position: relative;
}

.home_top_bg {
  .top_bgimg {
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 100;
    background: #fff;
  }

  .top_cont {
    display: flex;
    align-items: center;
    background: #fff;
  }

  .search {
    position: absolute;
    top: 16rpx;
    left: 30rpx;
  }

  .top_search {
    position: relative;
    /* #ifdef MP-WEIXIN */
    width: 70%;
    /* #endif */
    /* #ifndef MP-WEIXIN */
    width: 95%;
    /* #endif */
    height: 60rpx;
    border-radius: 30rpx;
    margin: 0 14rpx;
  }

  .top_search::after {
    border: 0;
  }
}

.classification_box {
  .classification_top {
    position: sticky;
    z-index: 1;
    font-size: 28rpx;
    color: #666666;
    padding: 0 31rpx;
    background: #fff;
    .item {
      width: 100%;
      white-space: nowrap;
      .text {
        height: 83rpx;
        line-height: 83rpx;
        display: inline-block;
        margin-left: 48rpx;
        position: relative;
      }
      .text:nth-child(1) {
        margin-left: 0;
      }
      .after {
        position: absolute;
        left: 50%;
        bottom: 12rpx;
        transform: translateX(-50%);
        width: 62rpx;
        height: 6rpx;
        background: linear-gradient(
          90deg,
          #2871fc 0%,
          rgba(40, 113, 252, 0) 100%
        );
        border-radius: 5rpx 5rpx 5rpx 5rpx;
      }
      .activeStyle {
        font-size: 28rpx;
        color: #2871fc;
        font-weight: bold;
      }
    }
  }
  .classification_body {
    margin-top: 12rpx;
    background: #fff;
    overflow: hidden;
    display: flex;
    .classification_left {
      width: 150rpx;
      border-radius: 0 0 8rpx 0;
      .item {
        width: 150rpx;
        height: 96rpx;
        line-height: 96rpx;
        text-align: center;
        font-size: 26rpx;
        color: #666666;
        background: #f0f0f0;
      }
      .selectItem {
        background: #fff;
        border-radius: 0 8rpx 8rpx 0;
      }
    }
    .classificationAfter {
      width: 150rpx;
      height: 20rpx;
    }
    .classification_right {
      width: calc(100% - 200rpx);
      margin-left: 16rpx;
      .filtering {
        display: flex;
        padding-top: 20rpx;
        .filtering_item {
          display: flex;
          align-items: center;
          margin-left: 18rpx;
          margin-right: 32rpx;
          color: #999;
          font-size: 24rpx;
          .sort {
            display: flex;
            flex-flow: column nowrap;
            align-items: center;
            margin-left: 8rpx;
            image {
              width: 10rpx;
              height: 7.82rpx;
            }
          }
        }
        .activeFiltering {
          color: #333;
          font-weight: bold;
        }
      }
      .goodsList {
        width: 100%;
        height: 100%;
        margin-top: 16rpx;
        padding-bottom: 20rpx;
        .goodsItem {
          display: flex;
          margin-bottom: 40rpx;
          .img {
            width: 218rpx;
            height: 218rpx;
            background: #f8f8f8;
            border-radius: 8rpx 8rpx 8rpx 8rpx;
            border: 2rpx solid #f8f8f8;
            margin-right: 16rpx;
            position: relative;
            .custom_box {
              position: absolute;
              left: 0;
              bottom: 0;
              image {
                width: 218rpx;
                height: 51rpx;
                position: absolute;
                left: 0;
                bottom: 0;
              }
              .copywriting {
                width: 96rpx;
                position: absolute;
                left: 108rpx;
                bottom: 4rpx;
                z-index: 2;
                text-align: center;
                color: #ffffff;
                font-size: 18rpx;
                margin-bottom: 4rpx;
              }
              .custom_prices {
                position: absolute;
                left: 8rpx;
                bottom: 4rpx;
                z-index: 2;
                .txt {
                  font-size: 12rpx;
                  color: #ffffff;
                  line-height: 1;
                }
                .price {
                  font-size: 20rpx;
                  color: #ffffff;
                  line-height: 1;
                  font-weight: bold;
                  margin: 2rpx 0 4rpx 0;
                  text {
                    font-size: 14rpx;
                  }
                }
              }
            }
          }
          .info {
            width: 55%;
            .goods_name {
              font-size: 30rpx;
              font-weight: bold;
              color: #333;
            }
            .simpleSpecs {
              font-size: 24rpx;
              color: #666;
              margin: 10rpx 0;
            }
            .manufacturer {
              margin-top: 10rpx;
            }
            .expirationDate,
            .manufacturer {
              font-size: 24rpx;
              color: #666;
              display: flex;
              align-items: center;
              image {
                width: 24rpx;
                height: 24rpx;
                margin-right: 4rpx;
              }
              text {
                width: 80%;
              }
            }
            .promotionPrice {
              display: flex;
              justify-content: space-between;
              align-items: center;
              .price {
                color: #ef231b;
                text:nth-child(1) {
                  font-size: 24rpx;
                }
                text:nth-child(2) {
                  font-size: 32rpx;
                }
                text:nth-child(3) {
                  font-size: 18rpx;
                  color: #999999;
                  margin-left: 4rpx;
                }
              }
              image {
                width: 40rpx;
                height: 40rpx;
              }
            }
          }
        }
      }
    }
    .notAvailable {
      width: 100%;
      color: #999999;
      font-size: 24rpx;
      text-align: center;
      padding-top: 40%;
      image {
        width: 300rpx;
        height: 300rpx;
      }
    }
  }
}
.noMovement {
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 100%;
}
</style>

